<template>
  <div class="setting">
    <p class="title" @click="isShowSettingForm = !isShowSettingForm">
      <span>设置</span>
      <el-icon><CaretBottom /></el-icon>
    </p>
    <Transition name="slide">
      <div class="settingForm" v-if="isShowSettingForm">
        <el-form
          ref="formRef"
          :model="form"
          label-width="auto"
          label-suffix="："
          label-position="left"
        >
          <el-form-item label="背景颜色" prop="backgroundColor">
            <el-color-picker
              v-model="form.backgroundColor"
              @change="handleBackgroundColorChange"
            />
          </el-form-item>
          <el-form-item label="背景图" prop="backgroundImage">
            <el-button @click="handleSelectBackgroundImage"
              >选择背景图</el-button
            >
            <el-image
              style="width: 32px; height: 32px; margin-left: 10px"
              v-if="form.backgroundImage"
              :fit="'cover'"
              :src="form.backgroundImage"
              :preview-src-list="[form.backgroundImage]"
            />
          </el-form-item>
        </el-form>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { useFileDialog } from '@vueuse/core'
import { computed } from 'vue'

const props = defineProps<{
  settingForm: {
    backgroundColor: string
    backgroundImage: string
  }
  isShowSettingForm: boolean
}>()

interface EmitsType {
  (e: 'update:settingForm', data: any): void
  (e: 'update:isShowSettingForm', value: boolean): void
}
const emit = defineEmits<EmitsType>()

const form = computed({
  get: () => props.settingForm,
  set: (value) => {
    emit('update:settingForm', value)
  },
})

const handleBackgroundColorChange = (color: string | null) => {
  if (!color) {
    form.value.backgroundColor = '#ffffff'
  }
}

const { open, reset, onCancel, onChange } = useFileDialog({
  accept: 'image/*', // Set to accept only image files
})

onChange((files) => {
  if (files && files.length > 0) {
    const file = files[0]
    // 这里可以添加处理选择的图片文件的逻辑
    console.log('选择的背景图文件:', file)
    if (form.value.backgroundImage) {
      URL.revokeObjectURL(form.value.backgroundImage) // 释放之前的URL
    }
    const url = URL.createObjectURL(file)
    form.value.backgroundImage = url
  }
})

onCancel(() => {
  reset()
})

const handleSelectBackgroundImage = () => {
  open()
}

const isShowSettingForm = computed({
  get: () => props.isShowSettingForm,
  set: (value) => {
    emit('update:isShowSettingForm', value)
  },
})
</script>

<style scoped lang="scss">
.setting {
  padding: 10px;
  .title {
    font-size: 16px;
    font-weight: bold;
    padding: 5px 0;
    color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .settingForm {
    height: 82px;
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: height 0.5s;
    overflow: hidden;
  }
  .slide-enter-from,
  .slide-leave-to {
    height: 0 !important;
  }
  .slide-enter-to,
  .slide-leave-from {
    height: 82px;
  }
  :deep(.el-form) {
    .el-form-item__label {
      color: #f5f5f5;
    }
  }
}
</style>
